import React from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import {Result, WhiteSpace, Button, Modal} from 'antd-mobile';
import browserCookie from 'browser-cookies';
import {logout} from '../../redux/registerRedux';

// import imgUrl from '../img/'+this.props.state.avatarText+'.png';

class UserCanter extends React.Component{
    render() {
        console.log(this.props.state);
        return (
            <div>
            {this.props.state.redirectTo === '/login'?<Redirect to={this.props.state.redirectTo}></Redirect>:null}
                <div className="sub-title">个人中心</div>
                {this.props.state.avatarText?<Result
                    img={<img style={{width:'100%',height:'100%'}} src={require(`../img/${this.props.state.avatarText}.png`)} className="spe am-icon am-icon-md" alt="" />}
                    title={this.props.state.user}
                    message={<div>{this.props.state.joinPosition}</div>}
                />:null}
                <WhiteSpace />
                <div className="sub-title">简介</div>
                <Result
                    message={<div>{this.props.state.desc}</div>}
                />
                <WhiteSpace />
                <Button type="warning" onClick={this.logout}>退出登录</Button><WhiteSpace />
            </div>
        )
    }
    logout = () => {
        // 使用确认弹窗提醒，确认退出后，清楚cookie，返回首页
        Modal.alert('退出登录', '确认退出吗???', [
            { text: '取消', onPress: () => console.log('cancel') },
            {
              text: '确认',
              onPress: () => {
                console.log('点击确认');
                browserCookie.erase('userId');//删除名字为username的cookie
                // window.location.href = window.location.href;//刷新页面
                this.props.logout();//使用redux注销登录，清空redux并跳转到login页面
              } 
            },
          ])
    }
}

const mapStateToProps = (state) => {
    console.log(state);
    return {
        state:state.registerReducer
    }
}
const mapDispatchToProps = {logout};
export default connect(mapStateToProps,mapDispatchToProps)(UserCanter);